<template>
  <div>
    <!-- 未审核表单 -->
    <div style="width: 100%; height: 300px">
      <el-form :inline="true" :model="f2" class="demo-form-inline">
        <el-form-item label="设备名称">
          <el-input v-model="f2.name"></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-select v-model="f2.no" placeholder="请选择">
            <el-option
              v-for="base in basestocknos"
              :label="base.no"
              :value="base.no"
              :key="base.no"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2">查询</el-button>
          <el-button type="primary" @click="reset2">清空</el-button>
        </el-form-item>
        <span>待审核清单</span>
      </el-form>
      <el-table :data="buycheck2" border height="250" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="150"> </el-table-column>
        <el-table-column prop="no" label="设备编号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="设备名称" width="120">
        </el-table-column>
        <el-table-column prop="useDate" label="启用日期" width="120">
        </el-table-column>
        <el-table-column prop="buySum" label="采购数量" width="120">
        </el-table-column>
        <el-table-column prop="money" label="采购金额" width="120">
        </el-table-column>
        <el-table-column prop="buyman" label="采购人" width="120">
        </el-table-column>
        <el-table-column prop="description" label="设备描述" width="250">
        </el-table-column>
        <el-table-column fixed="right" label="审核" width="150">
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-check"
              @click="check(scope.row)"
              circle
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 已审核表单 -->
    <hr />
    <div style="width: 100%; height: 300px">
      <el-form :inline="true" :model="f1" ref="f1" class="demo-form-inline">
        <el-form-item label="设备名称">
          <el-input v-model="f1.name"></el-input>
        </el-form-item>
        <el-form-item label="审批日期">
          <el-date-picker
            v-model="f1.checkDate"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit1">查询</el-button>
          <el-button type="primary" @click="reset1">清空</el-button>
          <el-button type="primary" @click="exportExcel">导出数据</el-button>
           <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
        </el-form-item>
        <span>已审核清单</span>
      </el-form>

      <el-table :data="buycheck1" border  height="250" style="width: 100%" tooltip-effect="dark" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="" width="150" v-if="false"> </el-table-column>
        <el-table-column prop="no" label="设备编号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="设备名称" width="120">
        </el-table-column>
        <el-table-column prop="useDate" label="启用日期" width="120">
        </el-table-column>
        <el-table-column prop="description" label="设备描述" width="300">
        </el-table-column>
        <el-table-column prop="buySum" label="采购数量" width="120">
        </el-table-column>
        <el-table-column prop="money" label="采购金额" width="120">
        </el-table-column>
        <el-table-column prop="buyman" label="采购人" width="120">
        </el-table-column>
        <el-table-column prop="checkDate" label="审核日期" width="120">
        </el-table-column>
        <el-table-column prop="checkman" label="审核人员" width="120">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      a:false,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      f1: {
        name: "",
        checkDate: "",
      },
      buycheck1: [],
      f2: {
        name: "",
        no: "",
      },
      buycheck2: [],
      basestocknos: {},
      multipleSelection:[]
    };
  },
  methods: {
    //取消所有行
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
     //得到所选行  
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    //已审核
    onSubmit1() {
      this.getbuychecked();
    },
    reset1() {
      this.f1 = { name: "", checkDate: "" };
      this.getbuychecked();
    },
    getbuychecked() {
      this.axios.post("/buy/getChecked", this.f1).then((res) => {
        console.log(res.data);
        this.buycheck1 = res.data.data;
      });
    },
    // 导出表格所用
    exportExcel() {
      import("@/utils/Export2Excel").then((excel) => {
        const tHeader = [
          "设备编号",
          "设备名称",
          "启用日期",
          "设备描述",
          "采购数量",
          "采购金额",
          "采购人",
          "审核日期",
          "审核人员",
        ]; // 表头数据
        const filterVal = [
          "no",
          "name",
          "useDate",
          "description",
          "buySum",
          "money",
          "buyman",
          "checkDate",
          "checkman",
        ]; //对应的字段名
        const list = this.multipleSelection;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel(tHeader, data, "已审核列表");
      });
    },
    //未审核
    onSubmit2() {
      this.getbuychecked();
    },
    reset2() {
      this.f2 = { name: "", no: "" };
      this.getbuyunchecked();
    },
    getbuyunchecked() {
      this.axios.post("/buy/getUnchecked", this.f2).then((res) => {
        console.log(res.data);
        this.buycheck2 = res.data.data;
      });
    },
    check(buycheck) {
      console.log(buycheck);
      this.axios.post("/buy/check", buycheck).then((res) => {
         if(res.data.code==200){
              this.getbuychecked();
             this.getbuyunchecked();
                this.$message({
                  message: "成功",
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
          }else{
             this.$message.error({
                message: "失败",
                offset:150,
                duration:1000
              });
          }
      });
    },
    del(id) {
      this.axios
        .get("/buy/delcheck", {
          params: {
            id: id,
          },
        })
        .then((res) => {
           if(res.data.code==200){
              this.getbuychecked();
              this.getbuyunchecked();
                this.$message({
                  message: "成功",
                  offset:150,
                  duration:1000,
                  type: 'success'
                });
          }else{
             this.$message.error({
                message: "失败",
                offset:150,
                duration:1000
              });
          }
        });
    },
    //得到设备列表
    getbasestock() {
      this.axios.get("/buy/getBaseStocks").then((res) => {
        console.log(res.data.data);
        this.basestocknos = res.data.data;
      });
    },
  },
  created() {
    this.getbuychecked();
    this.getbuyunchecked();
    this.getbasestock();
  },
};
</script>
<style scoped>
span {
  line-height: 50px;
  font-size: 25px;
  float: right;
  background: white;
  color: black;
  text-align: center;
  height: 45px;
}
</style>